<template>
  <div>
    <a-form ref="formRef" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" size="default">
      <slot name="form-item-task-name" :model="form" field="name">
        <a-form-item label="名称">
          <a-input v-model:value="form.name" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-displayName" :model="form" field="displayName">
        <a-form-item label="显示名称">
          <a-input v-model:value="form.displayName" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-form" :model="form" field="form">
        <a-form-item label="表单">
          <a-input v-model:value="form.form" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-assignee" :model="form" field="assignee">
        <a-form-item label="参与者">
          <a-input v-model:value="form.assignee" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-assignmentHandler" :model="form" field="assignmentHandler">
        <a-form-item label="参与者处理类">
          <a-input v-model:value="form.assignmentHandler" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-taskType" :model="form" field="taskType">
        <a-form-item label="任务类型">
          <a-select v-model:value="form.taskType">
            <a-select-option value="Major">主办任务</a-select-option>
            <a-select-option value="Aidant">协办任务</a-select-option>
          </a-select>
        </a-form-item>
      </slot>
      <slot name="form-item-task-performType" :model="form" field="performType">
        <a-form-item label="参与类型">
          <a-select v-model:value="form.performType">
            <a-select-option value="ANY">普通参与</a-select-option>
            <a-select-option value="ALL">会签参与</a-select-option>
          </a-select>
        </a-form-item>
      </slot>
      <slot name="form-item-task-preInterceptors" :model="form" field="preInterceptors">
        <a-form-item label="前置拦截器">
          <a-input v-model:value="form.preInterceptors" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-postInterceptors" :model="form" field="postInterceptors">
        <a-form-item label="后置拦截器">
          <a-input v-model:value="form.postInterceptors" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-reminderTime" :model="form" field="reminderTime">
        <a-form-item label="提醒时间">
          <a-input v-model:value="form.reminderTime" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-reminderRepeat" :model="form" field="reminderRepeat">
        <a-form-item label="重复提醒间隔">
          <a-input v-model:value="form.reminderRepeat" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-expireTime" :model="form" field="expireTime">
        <a-form-item label="期待完成时间">
          <a-input v-model:value="form.expireTime" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-autoExecute" :model="form" field="autoExecute">
        <a-form-item label="是否自动完成">
          <a-select v-model:value="form.autoExecute">
            <a-select-option value="N">否</a-select-option>
            <a-select-option value="Y">是</a-select-option>
          </a-select>
        </a-form-item>
      </slot>
      <slot name="form-item-task-callback" :model="form" field="callback">
        <a-form-item label="回调处理">
          <a-input v-model:value="form.callback" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-width" :model="form" field="width">
        <a-form-item label="宽度">
          <a-input-number :step="5" v-model:value="form.width" />
        </a-form-item>
      </slot>
      <slot name="form-item-task-height" :model="form" field="height">
        <a-form-item label="高度">
          <a-input-number :step="5" v-model:value="form.height" />
        </a-form-item>
      </slot>

      <a-card size="small" style="width: 100%" title="扩展属性">
        <template #extra>
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              添加
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu @click="handleCommand">
                <a-menu-item :disabled="item.disabled === true" :icon="item.icon" :key="item.name" v-for="item in dropdownData">
                  {{ item.label }}
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
        <div>
          <a-row v-for="item in attrList" :key="item.key" style="margin-bottom: 12px">
            <a-col :span="10" style="height: 32px; display: flex; align-items: center; position: relative; z-index: 99999">
              <span>
                {{ getLabel(item.key) }}&nbsp;
                <!-- <BasicHelp placement="top" class="mx-1" :text="getTooltip(item.key)" /> -->
                <a-tooltip>
                  <template #title>{{ getTooltip(item.key) }}</template>
                  <Icon icon="bx:help-circle" />
                </a-tooltip>
              </span>
            </a-col>
            <a-col :span="12">
              <a-select v-if="item.key == 'countersignType'" size="default" v-model:value="form.field[item.key]">
                <a-select-option value="PARALLEL">并行会签</a-select-option>
                <a-select-option value="SEQUENTIAL">顺序会签</a-select-option>
              </a-select>
              <template v-else>
                <component v-if="typeof getRender(item.key) === 'function'" :is="getRender(item.key)(form, item)" />
                <a-input v-else v-model:value="form.field[item.key]" size="default" />
              </template>
            </a-col>
            <a-col :span="2" style="height: 32px; display: flex; align-items: center; padding-left: 10px">
              <a-icon icon="ant-design:delete-outlined" v-if="item.disabled !== true" @click="handleRemoveFieldAttr(item.key)" />
            </a-col>
          </a-row>
        </div>
      </a-card>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, watch, defineProps, onMounted, defineEmits, computed } from 'vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  import { BasicHelp } from '/@/components/Basic';
  import { FlowFormModel } from '../types';
  // 注意:ref不能与model一样，相同的话表单双向绑定将会失效
  const formRef = ref(null);
  const form = reactive<FlowFormModel>({} as FlowFormModel);
  // 表单样式
  const labelCol = { span: 6 };
  const wrapperCol = { span: 18 };
  // 定义属性
  const props = defineProps<{
    value: FlowFormModel;
    extendAttrConfig: {
      // 扩展属性配置
      type: Object;
    };
  }>();
  const mDropdownData = [
    {
      label: '用户标识',
      name: 'userKey',
      icon: '',
      tips: '参与者处理类可根据用户标识获取参与者',
    },
    {
      label: '用户组标识',
      name: 'groupKey',
      icon: '',
      tips: '参与者处理类可根据用户组标识获取参与者',
    },
    {
      label: '候选用户',
      name: 'candidateUsers',
      icon: '',
      tips: '候选用户(提供给上一节点选择下一节点参与者的用户标识)',
    },
    {
      label: '候选用户组',
      name: 'candidateGroups',
      icon: '',
      tips: '候选用户组(提供给上一节点选择下一节点参与者的用户组标识)',
    },
    {
      label: '候选人处理类',
      name: 'candidateHandler',
      icon: '',
      tips: '获取候选人的处理类',
    },
    {
      label: '额外属性1',
      name: 'attr1',
      icon: '',
      tips: '其他扩展属性1',
    },
    {
      label: '额外属性2',
      name: 'attr2',
      icon: '',
      tips: '其他扩展属性2',
    },
    {
      label: '额外属性3',
      name: 'attr3',
      icon: '',
      tips: '其他扩展属性3',
    },
  ];
  const performTypeAttrs = [
    {
      label: '会签类型',
      name: 'countersignType',
      icon: '',
      tips: '参数类型为会签参与时生效',
      disabled: true,
    },
    {
      label: '会签完成条件',
      name: 'countersignCompletionCondition',
      disabled: true,
      icon: '',
      tips: '参数类型为会签参与时生效',
    },
  ];
  const dropdownData = computed<Array<any>>(() => {
    const { extendAttrConfig }: any = props;
    let res = [];
    if (!extendAttrConfig || !extendAttrConfig.items || !extendAttrConfig.items.length) {
      res = mDropdownData;
    } else {
      res = extendAttrConfig.items;
    }
    if (form.performType === 'ALL') {
      return [...performTypeAttrs, ...res];
    }
    return res;
  });
  const attrList = computed(() => {
    if (!form.field) {
      return [];
    }
    // 会签相关属性
    const performTypeAttrs: Array<any> = [];
    if (form.performType === 'ALL') {
      performTypeAttrs.push({
        key: 'countersignType',
        value: form.field.countersignType,
        disabled: true,
      });
      performTypeAttrs.push({
        key: 'countersignCompletionCondition',
        value: form.field.countersignCompletionCondition,
        disabled: true,
      });
    }
    return [
      ...performTypeAttrs,
      ...Object.keys(form.field)
        .filter((key: string) => !performTypeAttrs.map((item) => item.key).includes(key))
        .map((key) => {
          return {
            key: key,
            value: form.field[key],
          };
        }),
    ];
  });
  const emits = defineEmits(['update:value']);
  // 监听表单属性
  watch(
    () => form,
    () => {
      emits('update:value', Object.assign(props.value, form));
    },
    { deep: true }
  );

  const handleCommand = (e) => {
    form.field[e.key] = '';
  };

  const handleRemoveFieldAttr = (key: string) => {
    delete form.field[key];
  };

  const getLabel = (name: string) => {
    const res = dropdownData.value.find((item: any) => {
      return item.name === name;
    });
    if (res) {
      return res.label;
    }
    return '';
  };

  const getTooltip = (name: string) => {
    const res = dropdownData.value.find((item: any) => {
      return item.name === name;
    });
    if (res) {
      return res.tips || res.label;
    }
    return '';
  };

  const getRender = (name: string) => {
    const res = dropdownData.value.find((item: any) => {
      return item.name === name;
    });
    if (res) {
      return res.render;
    }
    return undefined;
  };

  watch(
    () => form.performType,
    () => {
      // 设置countersignType默认值
      if (form.performType === 'ALL' && !form.field.countersignType) {
        form.field.countersignType = 'PARALLEL';
      }
      if (form.performType !== 'ALL' && form.field) {
        performTypeAttrs.forEach((item) => {
          delete form.field[item.name];
        });
      }
    }
  );

  onMounted(() => {
    if (props.value.field) {
      if (typeof props.value.field === 'string') {
        Object.assign(form, props.value, { field: JSON.parse(props.value.field) });
      } else {
        Object.assign(form, props.value);
      }
    } else {
      Object.assign(form, props.value, { field: {} });
    }
  });
</script>
